<template>
  <el-select-v2
    class="full"
    v-model="valueId"
    filterable
    remote
    :remote-method="remoteMethod"
    :loading="loading"
    :options="options"
    :props="{ placeholder: '请选择' }"
    @change="handleChange"
    placeholder="请选择"
    :multiple="multiple"
  >
    <!-- <template #default="{ item }">
      <div class="option-item">
        <div class="label">{{ item.stationName }}</div>
        <div class="des">{{ item.location }}</div>
      </div>
    </template> -->
  </el-select-v2>
</template>
<script setup lang="ts">
import { listVendor } from '@/api/vendor/index';
const props = defineProps({
  /**当前双向数据绑定的值 */
  modelValue: {
    type: [String, Number, Array],
    default: ''
  },
  /**输入框内部的文字 */
  placeholder: {
    type: String,
    default: '请选择'
  },
  multiple: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:modelValue', 'change']);

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const options = ref<Array<any>>([]);

let loading = ref(false);
const valueId = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit('update:modelValue', val);
  }
});
function handleChange(val: string | number) {
  let option = options.value.find((it) => it.vendorId == val);
  emit('change', option);
}
const remoteMethod = async (query: string) => {
  loading.value = true;
  const res = await listVendor({ name: query, pageNum: 1, pageSize: 200 });
  loading.value = false;
  options.value = (res.rows || []).map((it) => ({ ...it, value: it.vendorId, label: it.name }));
};

remoteMethod('');
</script>
<style lang="scss" scoped>
.option-item {
  display: flex;
  height: 70px;
  flex-direction: column;

  .lebel {
    color: #323a45;
  }

  .des {
    color: #667685;
  }
}
</style>